<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>&lt;input type="number"&gt; example</title>
    <style>
      div {
        margin-bottom: 10px;
        position: relative;
      }

      input[type="number"] {
        width: 100px;
      }

      input + span {
        padding-right: 30px;
      }

      input:invalid+span:after {
        position: absolute;
        content: '✖';
        padding-left: 5px;
      }

      input:valid+span:after {
        position: absolute;
        content: '✓';
        padding-left: 5px;
      }
    </style>
  </head>

<body>
    <form>
        <div class="metersInputGroup">
            <label for="meters">Enter your height — meters:</label>
            <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required>
            <span class="validity"></span>
        </div>
        <div class="feetInputGroup" style="display: none;">
            <span>Enter your height — </span>
            <label for="feet">feet:</label>
            <input id="feet" type="number" name="feet" min="0" step="1">
            <span class="validity"></span>
            <label for="inches">inches:</label>
            <input id="inches" type="number" name="inches" min="0" max="11" step="1">
            <span class="validity"></span>
        </div>
        <div>
          <input type="button" class="meters" value="Enter height in feet and inches">
        </div>
        <div>
            <input type="submit" value="Submit form">
        </div>
    </form>
    <script>
      var metersInputGroup = document.querySelector('.metersInputGroup');
      var feetInputGroup = document.querySelector('.feetInputGroup');
      var metersInput = document.querySelector('#meters');
      var feetInput = document.querySelector('#feet');
      var inchesInput = document.querySelector('#inches');
      var switchBtn = document.querySelector('input[type="button"]');

      switchBtn.addEventListener('click', function() {
        if(switchBtn.getAttribute('class') === 'meters') {
          switchBtn.setAttribute('class', 'feet');
          switchBtn.value = 'Enter height in meters';

          metersInputGroup.style.display = 'none';
          feetInputGroup.style.display = 'block';

          feetInput.setAttribute('required', '');
          inchesInput.setAttribute('required', '');
          metersInput.removeAttribute('required');

          metersInput.value = '';
        } else {
          switchBtn.setAttribute('class', 'meters');
          switchBtn.value = 'Enter height in feet and inches';

          metersInputGroup.style.display = 'block';
          feetInputGroup.style.display = 'none';

          feetInput.removeAttribute('required');
          inchesInput.removeAttribute('required');
          metersInput.setAttribute('required', '');

          feetInput.value = '';
          inchesInput.value = '';
        }
      });

    </script>
</body>
